<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .banner {
            width: 600px;
            height: 400px;
            border: 1px solid black;
            margin: 50px auto;
            position: relative;
            /* overflow: hidden; */
        }

        .banner img {
            width: 100%;
            height: 100%;
            /* display: none; */
        }

        .banner p {
            width: 100%;
            height: 100%;
            background-color: blue;

            font-size: 55px;
            text-align: center;
            line-height: 400px;
            display: none;
        }



        .banner .showimg {
            display: block;
        }

        .banner .prev {
            font-size: 35px;
            color: whitesmoke;
            position: absolute;
            left: 0;
            top: 44%;
            cursor: pointer;
        }

        .banner .next {
            font-size: 35px;
            color: whitesmoke;
            position: absolute;
            right: 0;
            top: 44%;
            cursor: pointer;
        }

        .btn {
            position: absolute;
            bottom: 50px;
            left: 40%;

        }

        .btn button {
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        .showbtn {
            opacity: 0.3;
        }
    </style>
</head>

<body>
    <div class="banner">

        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>

        <div class="btn">
            <button class="showbtn"></button>
            <button></button>
            <button></button>
            <button></button>
            <button></button>
        </div>

        <p class="showimg">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F81%2Fec%2F83%2F81ec83ecc6c8d5c3574a11731b6cd2f7.png&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642818327&t=a7767d75d6c0397c65c18645a43b6d9a"
                alt="">
        </p>

        <p> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F811%2F091114092956%2F140911092956-2.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642818327&t=03e0cdabeb0e931ed38d72ed042b7eac"
                alt="" class="showimg">
        </p>

        <p>
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1111%2F11021Q51242%2F1Q102151242-6.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642818327&t=98ed882ad154bf391c22bf4bb6315cf6"
                alt="">
        </p>

        <p>
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1113%2F062R0133646%2F20062Q33646-11-1200.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642818327&t=07657a090711d808cfbc0bf45a949bd8"
                alt="">
        </p>

        <p>
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F130103%2F240385-13010321244124.jpg&refer=http%3A%2F%2Fimg.taopic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642818327&t=953abb714d7ba797691a0d1e314d1054"
                alt="">
        </p>

    </div>

    <script>
        var banner = document.querySelector(".banner");
        var prev = document.querySelector(".prev");
        var next = document.querySelector(".next");
        var btns = [...document.querySelectorAll("button")];
        var ps = [...document.querySelectorAll("p")];

        // // 先动起来，用定时器
        // var count = 0;
        // var t;
        // autoplay();

        // function autoplay() {
        //     t = setInterval(function () {
        //         count++;
        //         if (count >= ps.length) {
        //             count = 0;
        //         }

        //         btns.forEach(function (item) {
        //             btns.forEach(function (item2, m) {
        //                 item2.classList.remove("showbtn");
        //                 ps[m].classList.remove("showimg");
        //             })

        //             btns[count].classList.add("showbtn");
        //             ps[count].classList.add("showimg");
        //         })
        //     }, 1000)
        // }


        // // 点击小圆点会定在这一页
        // btns.forEach(function (item, n) {
        //     // 设置索引值，其为n表示是第n张图片的位置
        //     item.setAttribute("index", n)

        //     item.onclick = function () {
        //         // 点击小圆点时触发
        //         clearInterval(t);
        //         count = item.getAttribute("index");

        //         btns.forEach(function (item) {

        //             btns.forEach(function (item2, m) {
        //                 item2.classList.remove("showbtn");
        //                 ps[m].classList.remove("showimg");
        //             })

        //             // 在索引值对应的图片添加样式
        //             btns[count].classList.add("showbtn");
        //             ps[count].classList.add("showimg");
        //         })
        //     }
        // })

        // // 上翻页
        // prev.onclick = function () {
        //     clearInterval(t);
        //     count--;
        //     // 反复轮播
        //     if (count < 0) {
        //         count = ps.length - 1
        //     }

        //     btns.forEach(function (item) {

        //         btns.forEach(function (item2, m) {
        //             item2.classList.remove("showbtn");
        //             ps[m].classList.remove("showimg");
        //         })

        //         btns[count].classList.add("showbtn");
        //         ps[count].classList.add("showimg");
        //     })
        // }

        // // 下翻页
        // next.onclick = function () {
        //     // 消除定时器的影响
        //     clearInterval(t);
        //     count++;
        //     // 反复轮播
        //     if (count >= ps.length) {
        //         count = 0;
        //     }

        //     btns.forEach(function (item) {

        //         btns.forEach(function (item2, m) {
        //             item2.classList.remove("showbtn");
        //             ps[m].classList.remove("showimg");
        //         })

        //         btns[count].classList.add("showbtn");
        //         ps[count].classList.add("showimg");
        //     })
        // }

        // // 鼠标移入停止轮播

        // banner.onmouseover = function () {
        //     clearInterval(t);
        // }

        // // 鼠标移出开始轮播

        // banner.onmouseout = function () {
        //     autoplay();
        // }

        // 第二遍

        // 动起来
        var count = 0;
        var t;
        t = setInterval(function () {
            count++;
            if (count > ps.length - 1) {
                count = 0;
            }

            showone();
        }, 1000)

        function showone() {
            btns.forEach(function (item) {
                btns.forEach(function (item2, m) {
                    item2.classList.remove("showbtn");
                    ps[m].classList.remove("showimg");
                })

                btns[count].classList.add("showbtn");
                ps[count].classList.add("showimg");
            })
        }

        // 点击小点点清楚定时器，并停在对应位置
        btns.forEach(function (item, n) {
            item.setAttribute("index", n)
            item.onclick = function () {
                clearInterval(t);
                count = item.getAttribute("index");
                showone();
            }
        })

        // 上翻页
        prev.onclick = function () {
            clearInterval(t);
            count--;
            if (count < 0) {
                count = ps.length - 1;
            }

            showone();
        }

        // 下翻页
        next.onclick = function () {
            clearInterval(t);
            count++;
            if (count > ps.length - 1) {
                count = 0;
            }

            showone();
        }

        // 鼠标移入停止轮播

        banner.onmouseover = function () {
            clearInterval(t);
        }

        // 鼠标移出开始轮播

        banner.onmouseout = function () {
            autoplay();
        }
    </script>
</body>

</html>